<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>首页三</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link rel="stylesheet" href="/lib/layui-v2.5.5/css/layui.css" media="all">
    <link rel="stylesheet" href="/lib/font-awesome-4.7.0/css/font-awesome.min.css" media="all">
    <link rel="stylesheet" href="/css/public.css" media="all">
    <style>
        .top-panel {
            border: 1px solid #eceff9;
            border-radius: 5px;
            text-align: center;
        }

        .top-panel > .layui-card-body {
            height: 60px;
        }

        .top-panel-number {
            line-height: 60px;
            font-size: 30px;
            border-right: 1px solid #eceff9;
        }

        .top-panel-tips {
            line-height: 30px;
            font-size: 12px
        }
    </style>
</head>
<body>
<!--<div class="layuimini-container">-->
<div class="layuimini-main">

    <!--<div class="layui-row layui-col-space15">
        <div class="layui-col-xs12 layui-col-md3">

            <div class="layui-card top-panel">
                <div class="layui-card-header">要展示的指标名称</div>
                <div class="layui-card-body">
                    <div class="layui-row layui-col-space5">
                        <div class="layui-col-xs9 layui-col-md9 top-panel-number">
                            9,054,056
                        </div>
                        <div class="layui-col-xs3 layui-col-md3 top-panel-tips">
                            比昨天 <a style="color: #1aa094">▲0.12</a><br>
                            比七日 <a style="color: #bd3004">▼0.06</a>
                        </div>
                    </div>
                </div>
            </div>

        </div>
        <div class="layui-col-xs12 layui-col-md3">

            <div class="layui-card top-panel">
                <div class="layui-card-header">要展示的指标名称</div>
                <div class="layui-card-body">
                    <div class="layui-row layui-col-space5">
                        <div class="layui-col-xs9 layui-col-md9 top-panel-number">
                            9,054,056
                        </div>
                        <div class="layui-col-xs3 layui-col-md3 top-panel-tips">
                            比昨天 <a style="color: #1aa094">▲0.12</a><br>
                            比七日 <a style="color: #bd3004">▼0.06</a>
                        </div>
                    </div>
                </div>
            </div>

        </div>
        <div class="layui-col-xs12 layui-col-md3">

            <div class="layui-card top-panel">
                <div class="layui-card-header">要展示的指标名称</div>
                <div class="layui-card-body">
                    <div class="layui-row layui-col-space5">
                        <div class="layui-col-xs9 layui-col-md9 top-panel-number">
                            9,054,056
                        </div>
                        <div class="layui-col-xs3 layui-col-md3 top-panel-tips">
                            比昨天 <a style="color: #1aa094">▲0.12</a><br>
                            比七日 <a style="color: #bd3004">▼0.06</a>
                        </div>
                    </div>
                </div>
            </div>

        </div>
        <div class="layui-col-xs12 layui-col-md3">

            <div class="layui-card top-panel">
                <div class="layui-card-header">要展示的指标名称</div>
                <div class="layui-card-body">
                    <div class="layui-row layui-col-space5">
                        <div class="layui-col-xs9 layui-col-md9 top-panel-number">
                            9,054,056
                        </div>
                        <div class="layui-col-xs3 layui-col-md3 top-panel-tips">
                            比昨天 <a style="color: #1aa094">▲0.12</a><br>
                            比七日 <a style="color: #bd3004">▼0.06</a>
                        </div>
                    </div>
                </div>
            </div>

        </div>
    </div>-->

    <div class="layui-row layui-col-space15">
        <div class="layui-col-xs12 layui-col-md9">
            <div id="echarts-records" style="background-color:#ffffff;min-height:400px;padding: 10px"></div>
        </div>
        <div class="layui-col-xs12 layui-col-md3">
            <div id="echarts-pies" style="background-color:#ffffff;min-height:400px;padding: 10px"></div>
        </div>
    </div>


    <div class="layui-row layui-col-space15">
        <div class="layui-col-xs12 layui-col-md6">
            <div id="echarts-dataset" style="background-color:#ffffff;min-height:300px;padding: 10px"></div>
        </div>
        <div class="layui-col-xs12 layui-col-md6">
            <div id="echarts-map" style="background-color:#ffffff;min-height:300px;padding: 10px"></div>
        </div>
    </div>


</div>
<!--</div>-->
<script src="/lib/layui-v2.5.5/layui.js" charset="utf-8"></script>
<script src="/js/lay-config.js?v=1.0.4" charset="utf-8"></script>
<script>
    layui.use(['layer', 'jquery', 'echarts'], function () {
        var $ = layui.jquery,
            layer = layui.layer,
            echarts = layui.echarts;

        /* url: 'http://192.168.100.222:8082/',
                        type: "",
                        data:{},
                        dataType: "json",
                        success: function (rec) {}*/
        $.ajax({
            url: "http://192.168.100.222:8082/user/checking.do",
            type: "post",
            dataType: "json",
            success: function (rec) {
                if (rec.code !== 0) {
                    layer.msg("非管理员无权访问查询页面,请联系管理员", {icon: 5, time: 1500}, function () {
                        window.location.href = "/html/welcome.html?t=1";
                    })
                } else {
                    init();
                }
            }
        });

        function init() {
            $.ajax({
                url: 'http://192.168.100.222:8082/report/getMR.do',
                type: "post",
                dataType: "json",
                success: function (rec) {
                    // console.log("MR" + rec.data);
                    let data = rec.data;
                    let nums1 = [];
                    let nums2 = [];
                    let times = [];
                    let times2 = [];

                    bbq:
                        for (let dataKey of rec.data) {
                            // console.log(dataKey);
                            // console.log(dataKey.createTime);
                            let split = dataKey.createTime.split("T");
                            if (times.length !== 0) {
                                for (let time of times) {
                                    if (time === split) {
                                        break bbq;
                                    }
                                }
                            }
                            if (times.length < 10) {
                                console.log("+++=====+++++===++++==++=");
                                times.push(split[0]);
                                times2.push(split[0]);
                                if (dataKey.type === 1) {
                                    nums2.push(dataKey.totalMoney);
                                } else {
                                    nums1.push(dataKey.totalMoney);
                                }
                            }

                        }
                    times = Array.from(new Set(times));
                    times2 = Array.from(new Set(times2));
                    let times1 = times.reverse();
                    times2.push("product");
                    times2 = times2.reverse();

                    console.log("00000000" + times);
                    console.log("111111111 " + times1);
                    console.log("111111111 " + times2);

                    nums1 = nums1.reverse();
                    nums2 = nums2.reverse();

                    /**
                     * MP报表功能
                     */
                    var echartsRecords = echarts.init(document.getElementById('echarts-records'), 'walden');

                    var optionRecords = {
                        title: {
                            text: '销售额度'
                        },
                        tooltip: {
                            trigger: 'axis',
                            axisPointer: {
                                type: 'cross',
                                label: {
                                    backgroundColor: '#6a7985'
                                }
                            }
                        },
                        legend: {
                            data: ['会员收入', '商品收入']
                        },
                        toolbox: {
                            feature: {
                                saveAsImage: {}
                            }
                        },
                        grid: {
                            left: '3%',
                            right: '4%',
                            bottom: '3%',
                            containLabel: true
                        },
                        xAxis: [
                            {
                                type: 'category',
                                boundaryGap: false,
                                data: times1
                            }
                        ],
                        yAxis: [
                            {
                                type: 'value'
                            }
                        ],
                        series: [
                            {
                                name: '会员收入',
                                type: 'line',
                                stack: '总量',
                                areaStyle: {},
                                data: nums1
                            },
                            {
                                name: '商品收入',
                                type: 'line',
                                areaStyle: {},
                                data: nums2
                            },
                        ]
                    };
                    echartsRecords.setOption(optionRecords);
                    // echarts 窗口缩放自适应
                    window.onresize = function () {
                        echartsRecords.resize();
                    };
                    /**
                     * MP柱状图
                     */
                    var echartsDataset = echarts.init(document.getElementById('echarts-dataset'), 'walden');
                    var source1 = "{product: '会员收入'";
                    let series = [];
                    for (let i = 0; i < (times1.length <= 5 ? times1.length : 5); i++) {
                        source1 += ",'" + times1[i] + "':" + nums1[i];
                        series.push({type: 'bar'})
                    }
                    source1 += "}";
                    console.log(source1);
                    var obj1 = eval('(' + source1 + ')');

                    var source2 = "{product: '商品收入'";
                    for (let i = 0; i < times1.length; i++) {
                        source2 += ",'" + times1[i] + "':" + nums2[i]
                    }
                    source2 += "}";
                    console.log(source2);
                    var obj2 = eval('(' + source2 + ')');


                    var optionDataset = {
                        legend: {},
                        tooltip: {},
                        dataset: {
                            dimensions: times2,
                            source: [
                                obj1,
                                obj2
                            ]
                        },
                        xAxis: {type: 'category'},
                        yAxis: {},
                        // Declare several bar series, each will be mapped
                        // to a column of dataset.source by default.
                        series: series
                    };
                    echartsDataset.setOption(optionDataset);


                }
            });

            $.ajax({
                url: 'http://192.168.100.222:8082/report/getRR.do',
                type: "post",
                dataType: "json",
                success: function (rec) {
                    // console.log("RR" + rec.data);
                    let roleNames = [];
                    let datas = [];
                    let times = [];
                    let times1 = [];

                    for (let dataKey of rec.data) {

                        console.log(dataKey);
                        console.log("时间213131313131313    " + dataKey.createTime);
                        roleNames.push(dataKey.roleName);
                        aaaa:
                            if (datas.length !== 0) {
                                for (let data of datas) {
                                    console.log(data.name + "=========" + dataKey.roleName);
                                    if (data.name === dataKey.roleName) {
                                        data.value = data.value + dataKey.userNum;
                                        console.log("eeeeeeeeeeeee3333333333333     " + data.value + data.name);
                                        break aaaa;
                                    }
                                }
                                datas.push({value: dataKey.userNum, name: dataKey.roleName});
                            } else {
                                datas.push({value: dataKey.userNum, name: dataKey.roleName});
                            }
                        times.push(dataKey.createTime.split("T")[0]);
                        times1.push(dataKey.createTime.split("T")[0]);
                    }
                    // console.log("123123   " + datas);
                    times = Array.from(new Set(times));
                    times1 = Array.from(new Set(times1));
                    times.push("product");
                    times = times.reverse();
                    times1 = times1.reverse();
                    console.log("时间11111111111   " + times);
                    console.log("时间22222222222   " + times1);

                    roleNames = Array.from(new Set(roleNames));

                    /**
                     * RR玫瑰图表
                     */
                    var echartsPies = echarts.init(document.getElementById('echarts-pies'), 'walden');
                    var optionPies = {
                        title: {
                            text: '会员数量总增值图(5天内)',
                            left: 'center'
                        },
                        tooltip: {
                            trigger: 'item',
                            formatter: '{a} <br/>{b} : {c} ({d}%)'
                        },
                        legend: {
                            orient: 'vertical',
                            left: 'left',
                            data: roleNames
                        },
                        series: [
                            {
                                name: '会员类型',
                                type: 'pie',
                                radius: '55%',
                                center: ['50%', '60%'],
                                roseType: 'radius',
                                data: datas,
                                emphasis: {
                                    itemStyle: {
                                        shadowBlur: 10,
                                        shadowOffsetX: 0,
                                        shadowColor: 'rgba(0, 0, 0, 0.5)'
                                    }
                                }
                            }
                        ]
                    };
                    echartsPies.setOption(optionPies);
                    /**
                     * RR柱状图
                     */
                    let sources = [];

                    //角色的遍历
                    for (let roleName of roleNames) {
                        let obj = {product: roleName};
                        //元数据的遍历
                        for (let dataKey of rec.data) {
                            if (dataKey.roleName === roleName) {
                                for (let x of times1) {
                                    if (dataKey.createTime.split("T")[0] == x) {
                                        obj = $.extend(obj, {[x]: dataKey.userNum});
                                        console.log("+++++=======++++++" + obj);
                                    }
                                }
                            }
                        }
                        sources.push(obj);
                    }
                    let series = [];
                    console.log(times1.length);
                    for (let i = 0; i < (times1.length <= 5 ? times1.length : 5); i++) {
                        series.push({type: 'bar'})
                    }
                    console.log(series);
                    console.log("-------" + JSON.stringify(sources));
                    var echartsDataset1 = echarts.init(document.getElementById('echarts-map'), 'walden');
                    var optionDataset1 = {
                        legend: {},
                        tooltip: {},
                        dataset: {
                            dimensions: times,
                            source: sources
                        },
                        xAxis: {type: 'category'},
                        yAxis: {},
                        series: series
                    };
                    echartsDataset1.setOption(optionDataset1);
                }
            });
        }
    });
</script>
</body>
</html>
